import React from 'react';
import './Knowledge.css';

const FitnessKnowledge = () => {
  // 健身知识数据
  const fitnessTips = [
    {
      title: "热身的重要性",
      content: "运动前热身可以提高身体温度，增加关节灵活性，减少受伤风险。建议每次运动前进行5-10分钟的动态拉伸。"
    },
    {
      title: "合理安排休息",
      content: "肌肉在休息时生长，不要连续两天训练同一肌群。成年人每周至少需要150分钟中等强度有氧运动。"
    },
    {
      title: "营养补充",
      content: "运动后30分钟内补充蛋白质和碳水化合物，有助于肌肉恢复。日常饮食应均衡摄入蛋白质、碳水和健康脂肪。"
    }
  ];

  const commonMistakes = [
    "只做有氧运动忽略力量训练",
    "追求重量忽视动作正确性",
    "训练过度而不注重恢复",
    "忽视核心训练的重要性",
    "没有根据自身情况制定计划"
  ];

  return (
    <div className="fit-container">
      <h2 className="fit-title">健身基础知识</h2>
      
      <section className="fit-section fit-intro">
        <p>
          健身是一种生活方式，不仅能增强体质，还能改善心理健康。无论是初学者还是有经验的健身者，
          了解正确的健身知识都至关重要。下面是一些基础的健身知识，帮助你更科学地进行锻炼。
        </p>
      </section>
      
      <section className="fit-section fit-tips">
        <h3 className="fit-section-title">健身小贴士</h3>
        <div className="fit-tips-list">
          {fitnessTips.map((tip, index) => (
            <div key={index} className="fit-tip-card">
              <h4 className="fit-tip-title">{tip.title}</h4>
              <p className="fit-tip-content">{tip.content}</p>
            </div>
          ))}
        </div>
      </section>
      
      <section className="fit-section fit-mistakes">
        <h3 className="fit-section-title">常见健身误区</h3>
        <ul className="fit-mistakes-list">
          {commonMistakes.map((mistake, index) => (
            <li key={index} className="fit-mistake-item">{mistake}</li>
          ))}
        </ul>
      </section>
      
      <section className="fit-section fit-conclusion">
        <p className="fit-conclusion-text">
          记住，健身是一个循序渐进的过程，保持耐心和 consistency 是成功的关键。
          根据自身情况制定合理计划，并在必要时咨询专业教练的建议。
        </p>
      </section>
    </div>
  );
};

export default FitnessKnowledge;
